<template>
  <footer class="footer">
    <div class="footer-content">
      <!-- 主要信息 -->
      <div class="footer-section">
        <div class="footer-logo">
          <img src="@/assets/logo.svg" alt="logo" />
          <h3>儿童英语学习网站</h3>
        </div>
        <p class="footer-desc">致力于为乡村儿童提供优质的英语教育资源，让每个孩子都能享受到公平的教育机会。</p>
        <div class="contact-info">
          <div class="contact-item">
            <i class="icon">📞</i>
            <span>服务热线：400-888-8888</span>
          </div>
          <div class="contact-item">
            <i class="icon">✉️</i>
            <span>联系邮箱：support@ruraleng.edu.cn</span>
          </div>
        </div>
      </div>

      <!-- 快速链接 -->
      <div class="footer-section">
        <h4>快速链接</h4>
        <ul class="footer-links">
          <li v-for="link in quickLinks" :key="link.text">
            <a :href="link.url">{{ link.text }}</a>
          </li>
        </ul>
      </div>

      <!-- 教育资源 -->
      <div class="footer-section">
        <h4>教育资源</h4>
        <ul class="footer-links">
          <li v-for="resource in educationResources" :key="resource.text">
            <a :href="resource.url">{{ resource.text }}</a>
          </li>
        </ul>
      </div>

      <!-- 关注我们 -->
      <div class="footer-section">
        <h4>关注我们</h4>
        <div class="social-links">
          <a v-for="social in socialMedia" :key="social.name" :href="social.url" class="social-item" :title="social.name">
            <i class="icon">{{ social.icon }}</i>
          </a>
        </div>
        <div class="qrcode-section">
          <div class="qrcode-item">
            <img src="https://img1.baidu.com/it/u=22760191,2337570162&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707" alt="微信公众号" />
            <span>微信公众号</span>
          </div>
          <div class="qrcode-item">
            <img src="https://img1.baidu.com/it/u=2632867673,1351018229&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt="小程序" />
            <span>学习小程序</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 认证信息 -->
    <div class="footer-bottom">
      <div class="certification">
        <span v-for="cert in certifications" :key="cert" class="cert-item">{{ cert }}</span>
      </div>
      <div class="copyright">
        <p>Copyright © 2024 儿童英语学习网站 All Rights Reserved.</p>
        <p>{{ companyInfo }}</p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      quickLinks: [
        { text: '关于我们', url: '/about' },
        { text: '帮助中心', url: '/help' },
        { text: '使用指南', url: '/guide' },
        { text: '隐私政策', url: '/privacy' },
        { text: '用户协议', url: '/terms' },
        { text: '加入我们', url: '/join' }
      ],
      educationResources: [
        { text: '教材下载', url: '/resources/books' },
        { text: '学习资料', url: '/resources/materials' },
        { text: '教学视频', url: '/resources/videos' },
        { text: '教师培训', url: '/resources/training' },
        { text: '家长指南', url: '/resources/parents' },
        { text: '常见问题', url: '/resources/faq' }
      ],
      socialMedia: [
        { name: '微信', icon: '💬', url: '#' },
        { name: '微博', icon: '🌐', url: '#' },
        { name: '抖音', icon: '🎵', url: '#' },
        { name: 'B站', icon: '📺', url: '#' }
      ],
      certifications: ['教育部备案 12345678号', 'ICP证：浙B2-20230001', '网络文化经营许可证', '浙公网安备 33010002000012号'],
      companyInfo: '大连市东软信息学院教育科技有限公司 联系电话：0571-88888888'
    }
  }
}
</script>

<style scoped>
.footer {
  background: #2c3e50;
  color: #ffffff;
  padding: 60px 0 20px;
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-logo img {
  height: 40px;
}

.footer-logo h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.footer-desc {
  color: #b9c3cd;
  line-height: 1.6;
  margin-bottom: 24px;
  font-size: 14px;
}

.contact-info {
  display: grid;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b9c3cd;
  font-size: 14px;
}

.footer-section h4 {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 24px 0;
  font-weight: 500;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #b9c3cd;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #ffffff;
}

.social-links {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.social-item {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.social-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.qrcode-section {
  display: flex;
  gap: 20px;
}

.qrcode-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-item img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.qrcode-item span {
  font-size: 12px;
  color: #b9c3cd;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 20px 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.certification {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
}

.cert-item {
  color: #b9c3cd;
  font-size: 12px;
}

.copyright {
  text-align: center;
  color: #b9c3cd;
  font-size: 12px;
}

.copyright p {
  margin: 4px 0;
}

@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
  }

  .qrcode-section {
    justify-content: center;
  }

  .certification {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
</style>
